<template>
  <div class="live-online-box">
    <div class="live-online-box-tag" />
    <span class="live-online-title">观众人数设置</span>
    <div class="live-online-horizontal" />
    <span class="live-online-overview-text">样式：</span>
    <div class="live-online-image">
      <el-image :src="require('@/assets/online_user_settting_overview.png')">
        <div slot="placeholder" class="image-slot">
          加载中<span class="dot">...</span>
        </div>
      </el-image>
    </div>

    <div class="live-online-button-horizontal" />
    <el-button class="submit-button" type="primary" :loading="submitLoading" @click="updateLiveReq">提交</el-button>

    <div class="choice-box">
      <div class="display-switch">
        <span class="title-span-style">显示开关：</span>
        <el-switch
          v-model="displayData.IsEnableOnlineUsers"
          :active-color="switchData.active_color"
          :inactive-color="switchData.inactive_color"
          :active-value="switchData.active_value"
          :inactive-value="switchData.inactive_value"
        />
      </div>

      <div class="display-method">
        <span class="title-span-style">显示形式：</span>
        <el-radio-group v-model="displayData.OnlineUserDisplayMethod">
          <el-radio class="el-btn-text-style" label="real">真实在线人数</el-radio>
          <el-radio class="el-btn-text-style" label="play">真实累计人数（观看总数）</el-radio>
        </el-radio-group>
      </div>

      <div class="add-online-user-base">
        <span class="title-span-style">增加人数：</span>
        <span class="change-online-policy">默认基础人数</span>
        <el-input v-model="displayData.OnlineBaseUsers" class="elinput-style" placeholder="请输入内容" />
        <span class="change-online-policy-unit">人</span>
      </div>

      <div class="add-online-user-true">
        <span class="change-online-policy" style="margin-right: 10px">实际人数 x </span>
        <el-input v-model="displayData.OnlineUserTimes" class="elinput-style" placeholder="请输入内容" />
        <span class="change-online-policy-unit">倍</span>
      </div>
    </div>
    <div class="button-text">
      <span>注：</span>
      <div>
        <p>
          1.显示观众人数=默认基础人数+实际人数×倍数<br>
          2.该数据只为前端用户展现，后台数据以真实数据统计<br>
          3.修改后，电脑端、手机端同步生效<br>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { updateLive } from '@/api/lives'

export default {
  name: 'SubjectSetting',
  data() {
    return {
      submitLoading: false,
      fileUploadAddr: '',
      fileUploadHeaders: {
        Authorization: ''
      },
      switchData: {
        inactive_value: false,
        active_value: true,
        active_color: '#13ce66',
        inactive_color: '#ff4949'
      },
      displayData: {
        IsEnableOnlineUsers: true,
        OnlineUserDisplayMethod: 'real',
        // 基础人数
        OnlineBaseUsers: 0,
        // 基础人数倍数
        OnlineUserTimes: 1

      },
      updateLiveData: {
        IsEnableOnlineUsers: null,
        // 在线人数显示方式
        OnlineUserDisplayMethod: null,
        // 基础人数
        OnlineBaseUsers: null,
        // 基础人数倍数
        OnlineUserTimes: null
      }
    }
  },
  computed: {
    ...mapGetters([
      'choicedLive',
      'token'
    ])
  },
  watch: {
    'choicedLive'(n, o) {
      this.initOrChanged(n)
    },
    'token'(n, o) {
      this.fileUploadHeaders.Authorization = this.token
    }
  },
  mounted() {
    // 获取图片的地址
    this.fileUploadHeaders.Authorization = this.token
    this.fileUploadAddr = process.env.VUE_APP_BASE_API + '/api/v1/files'
    this.initOrChanged(this.choicedLive)
  },
  methods: {
    initOrChanged(d) {
      if (this.choicedLive.id) {
        this.displayData.OnlineUserDisplayMethod = this.choicedLive.OnlineUserDisplayMethod || 'real'
        this.displayData.IsEnableOnlineUsers = this.choicedLive.IsEnableOnlineUsers || true
        this.displayData.OnlineBaseUsers = this.choicedLive.OnlineBaseUsers || 0
        this.displayData.OnlineUserTimes = this.choicedLive.OnlineUserTimes || 1
      }
    },
    // 更新直播请求
    updateLiveReq() {
      this.submitLoading = true
      const reqData = Object.assign(this.updateLiveData, this.displayData)
      updateLive(reqData, this.choicedLive.id).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: '保存成功',
            type: 'success'
          })
        }
      })
      this.submitLoading = false
    }
  }
}
</script>

<style lang="scss" scoped>
.live-online-box {
    width: 1627px;
    height: 770px;
    background: #FFFFFF;
    border-radius: 10px;
    position: absolute;
    top: 13px;
    left: 260px;
}
.live-online-box-tag {
    width: 4px;
    height: 28px;
    background: #2E9BEA;
    border-radius: 2px;
    position: absolute;
    top: 25px;
    }
.live-online-title {
    width: 145px;
    height: 23px;
    font-size: 24px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #4A5462;
    position: absolute;
    top: 31px;
    left: 55px;
}
.live-online-horizontal {
    width: 1514px;
    height: 4px;
    background: #EDF5FB;
    position: absolute;
    top: 85px;
}
.live-online-overview-text {
    width: auto;
    height: 20px;
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #6D7A8E;
    position: absolute;
    top: 139px;
    left: 849px;
}

.live-online-image {
  display: flex;
  position: absolute;
  align-items: center;
  top: 196px;
  left: 849px;
  width: 461px;
  height: 374px;
  ::v-deep {
      .el-image__inner {
          width: 461px;
          height: 374px;
      }
  }
}
.live-online-button-horizontal {
    width: 1514px;
    height: 4px;
    background: #EDF5FB;
    position: absolute;
    top: 645px;
}
.submit-button {
    width: 159px;
    height: 50px;
    background: #2E9BEA;
    border-radius: 10px;
    position: absolute;
    top: 687px;
    left: 659px;
::v-deep {
  span {
    width: 46px;
    height: 20px;
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
  }
  }
}
.add-online-user {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    width: auto;
    height: 40px;
}
.button-text {
    display: flex;
    position: absolute;
    top: 407px;
    left: 190px;
    ::v-deep{
    span,p {
        width: auto;
        height: auto;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #A7B5CB;
        line-height: 2rem;
    }
    }
}
.elinput-style {
    width: auto;
    height: auto;
    border: 1px solid #AFBDD2;
    border-radius: 10px;
    margin-left: 10px;
    ::v-deep {
        .el-input__inner,elinput-style,el-input,el-input--medium {
                width: 143px;
                height: 40px;
                border: 1px solid #AFBDD2;
                border-radius: 10px;
                border: 0px;
                display: flex;
                align-items: center;
        }
        span {
            width: 8px;
            height: 11px;
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #606772;
        }
    }
}
.display-method {
    display: flex;
    align-items: center;
    span {
        width: auto;
        height: 15px;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #6D7A8E;
    }
    ::v-deep {
        .el-radio__label {
            width: auto;
            height: auto;
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #6D7A8E;
        }
    }
}
.choice-box {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: absolute;
    left: 75px;
    top: 143px;
    height: 250px;
    width: auto;
    .title-span-style {
        width: auto;
        height: auto;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #6D7A8E;
        margin-right: 20px;
    }
    .display-switch {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        width: auto;
        height: 21px;
    }
    .add-online-user-true {
    margin-left: 100px;
    }
    .change-online-policy {
        width: auto;
        height: auto;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #6D7A8E;
    }
    .change-online-policy-unit {
        width: auto;
        height: auto;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #A3B3CE;
        margin-left: 10px;
    }
}
</style>
